<template>
	<view>
		<view class="container">
			<view class="banner">
				<u-swiper :list="info.thumbs" keyName="preview_url" :height="300"></u-swiper>
			</view>
			<view class="desc margin-top">
				<view class="auth grid col-3 padding-xs text-center text-sm themeColor">
					<view>
						<text class="cuIcon-profile padding-right-mn"></text> 实名认证
					</view>
					<view>
						<text class="cuIcon-vipcard padding-right-mn"></text> 资格证书
					</view>
					<view>
						<text class="cuIcon-refund padding-right-mn"></text> 爽约包赔
					</view>
				</view>
				<view class="desc-content bg-white padding radius-xl">
					<view class="top">
						<view class="name">
							<text class="text-xl text-bold text-black">{{ info.nickname }}</text>
							<view class="cu-tag sm round margin-left" @click="collect(info)">
								<text class="padding-right-mn text-red" :class="info.is_collect ? 'cuIcon-likefill' : 'cuIcon-like'"></text> {{ info.collect_num }}
							</view>
							<view class="cu-tag sm round margin-left themeColor">
								<text class="padding-right-mn cuIcon-favorfill"></text> {{ info.comment_grade }}
							</view>
						</view>
						<view class="distance ">
							<view class="cu-tag radius bg-green light">
								<text class="text-sm">最早可约</text>
								<text class="text-right text-orange text-bold padding-left-mn">{{ info.appointment_time
								}}</text>
							</view>
						</view>
					</view>
					<view class="center text-sm text-gray">
						<text>已服务{{ info.order_num }}单</text>
						<view class="" v-if="info.distance_text">
							<text class="cuIcon-location padding-right-mn"></text>
							<text class="text-black">{{ info.distance_text }}</text>
						</view>
					</view>
					<view class="buttom text-sm text-gray">
						<text>从事健康行业{{info.work_meet}}年，期待您的预约</text>
					</view>
				</view>
			</view>


			<view class="navaction padding padding-bottom-0">
				<view class="bg-white radius-xl padding-top-lg">
					<view class="grid col-3 padding-sm text-center">
						<view :class="navTbale == index ? 'active' : ''" v-for="(item, index) in navList" :key="index"
							@click="changeNavTab(index)">
							{{ item }}
						</view>
					</view>

					<view class="padding-top-0">
						<view class="project-list bg-white padding-sm radius-xl" v-show="navTbale === 0">
							<template v-if="projects.length > 0">
								<view class="item radius-lg padding-tb" :class="index > 0 ? 'solid-top' : ''"
									v-for="(item, index) in projects" :key="index">
									<image :src="item.thumb" mode="aspectFill" class="img" v-if="item.thumb"></image>
									<view class="probox">
										<view class="title text-bold text-black margin-bottom-xs">
											<text>{{ item.title }}</text>
											<view class="text-sm text-right cost text-red">
												<text class="text-bold">¥</text>
												<text class="text-lg text-bold">{{ item.price }}</text>
											</view>
										</view>
										<view class="text-gray margin-bottom-sm text-sm">{{ item.tips }}</view>
										<view class="price flex flex-wrap">
											<view class="time basis-sm text-sm">
												<text class="cuIcon-timefill text-lg themeColor"></text>
												<text class="padding-left-mn">{{ item.service_duration }}分钟</text>
											</view>
											<view class="basis-lg text-right liji">
												<u-number-box button-size="20" v-model="item.num"
													:min="0" :max="item.overtime_state ? 99 : 1" :name="index"
													:disabled="info.reservation_disabled" style="float: right;">
												</u-number-box>
											</view>
										</view>
										<view class="flex align-center text-sm">
											<view>加钟：</view>
											<view class="flex-sub" v-if="item.overtime_state">
												<view v-if="item.overtime_separate">
													{{ item.overtime_price }}元/{{ item.overtime_duration }}分钟</view>
												<view v-else>跟随项目定价</view>
											</view>
											<view class="flex-sub" v-else>不可用</view>
										</view>
									</view>
								</view>
							</template>
							<view class="flex flex-direction justify-center" v-else>
								<emptyData type="notData" text="技师暂无服务"></emptyData>
							</view>
						</view>

						<!-- 技师介绍 -->
						<view class="shebase bg-white radius-xl" v-show="navTbale === 1">
							<view class="cu-card dynamic no-card" v-if="info.pddpp">
								<view class="margin-bottom">
									<view class="cu-item shadow">
										<view class="text-content padding-lr-sm">
											今天的你依旧会很辛运的啊
										</view>
										<view class="grid flex-sub padding-lr-sm col-4 grid-square padding-top-sm">
											<view class="bg-img" :style="'background-image:url(' + item + ')'"
												v-for="(item, index) in info.photos" :key="index">
											</view>
										</view>
										<view class="text-gray text-sm padding zan-bottom themeColor">
											<view class="time">
												<text class="cuIcon-timefill margin-lr-xs"></text> 2023-05-06
											</view>
											<view class="text-right">
												<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
												<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
												<text class="cuIcon-messagefill margin-lr-xs"></text> 30
											</view>

										</view>
									</view>
								</view>
							</view>
							<view class="flex flex-direction justify-center" v-else>
								<emptyData type="notData" text="暂无更多介绍"></emptyData>
							</view>
						</view>

						<!-- 技师评价 -->
						<Comment :list="info.comments" :show="navTbale == 2 ? true : false" />
					</view>
				</view>
			</view>
		</view>

		<!-- 立即预约 -->
		<view class="cu-bar bg-white tabbar shop foot grid col-2" v-if="projects.length>0">
			<view class="check padding-left">
				<template v-if="proCount > 0">
					已选<text class="text-red padding-lr-xs">{{ proCount }}</text>项服务项目
				</template>
				<template v-else>
					选择服务项目开始预约
				</template>
			</view>
			<view class="reservation text-right padding-right">
				<button class="cu-btn round china-btn-bg" @click="goReserva()"
					:disabled="proCount < 1 || info.reservation_disabled">立即预约</button>
			</view>
		</view>

		<loading v-if="pageLoading" />
	</view>
</template>

<script>
import Comment from './modules/comment';
export default {
	components: { Comment },
	data() {
		return {
			pageLoading: false,
			navTbale: 0,
			navList: ['服务项目', '技师介绍', '用户评价'],
			info: {},
			projects: []
		};
	},
	computed: {
		proCount() {
			return this.projects.filter(item => item.num > 0).length;
		}
	},
	onLoad(options) {
		this.getInfo(options.id);
	},
	methods: {
		getInfo(technician_id) {
			this.pageLoading = true;
			this.$utils.$api.Technician.details(technician_id).then(data => {
				this.info = data;
				this.getService();
			})
				.catch(err => {
					uni.showModal({
						title: '提示',
						content: err.msg,
						showCancel: false,
						success: () => {
							this.$utils.$page.back();
						}
					})
					console.log(err);
				})
				.finally(() => {
					this.pageLoading = false;
				})
		},
		getService() {
			this.pageLoading = true;
			this.$utils.$api.Service.list({
				technician_id: this.info.technician_id
			}).then(data => {
				this.projects = data;
			}).finally(() => {
				this.pageLoading = false;
			});
		},
		goReserva() {
			let ReservaData = {
				technician: this.info,
				service: this.projects.filter(item => item.num > 0)
			};
			this.$utils.useStorage().set('ReservaData', ReservaData).then(() => {
				this.$utils.$page.open('/pages/order/confirm', true);
			}).catch(() => {
				this.$utils.$message.error('页面通信错误，请重试');
			})
		},
		changeNavTab(index) {
			this.navTbale = index;
		},
		collect(item) {
			this.$utils.$api.Collect.technician(item.technician_id).then((data) => {
				item.is_collect = data.state;
				if (data.state) {
					item.collect_num++;
				} else {
					item.collect_num--;
				}
			}).catch(err => {
				this.$utils.$message.error(err.msg);
			})
		}
	}
}
</script>

<style lang="less" scoped>
.container {
	padding-bottom: 120upx;

	.banner {
		border-bottom-left-radius: 55upx;
		border-bottom-right-radius: 55upx;
		overflow: hidden;
	}

	.navaction {
		.active {
			color: black;
			font-weight: bold;
		}
	}

	.desc {

		.auth {
			border-top-left-radius: 15upx;
			border-top-right-radius: 15upx;
			width: 85%;
			margin: auto;
			background-color: #e0fbf3;
		}

		.desc-content {
			width: 93%;
			margin: auto;
			line-height: 45upx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name {
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
			}

			.center {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
}

.project-list {
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;

		.img {
			width: 170upx;
			height: 140upx;
			border-radius: 10upx;
		}

		.probox {
			width: 70%;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: baseline;

				.cost {
					width: 125upx;
				}
			}
		}
	}
}

.shebase {
	.zan-bottom {
		display: flex;
		justify-content: space-between;
	}
}
</style>
